<template>
  <div class="index-container">
    <a-form
      layout="inline"
      :model="formState"
      @finish="handleFinish"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item label="邀请码：">
        <a-input
          v-model:value="formState.code"
          placeholder="输入邀请码"
        ></a-input>
      </a-form-item>
      <a-form-item label="数量">
        <a-input-number
          id="inputNumber"
          v-model:value="formState.num"
          :min="1"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          :disabled="formState.code === '' || !formState.num"
        >
          赠送
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import { sendCoupon } from '@/api/table'
  import { reactive } from 'vue'
  export default {
    name: 'Index',
    setup() {
      const formState = reactive({
        code: '',
        num: 1,
      })

      const handleFinish = (values) => {
        console.log(values, formState)
        sendCoupon({ code: formState.code, couponCount: formState.num })
      }

      const handleFinishFailed = (errors) => {
        console.log(errors)
      }

      return {
        formState,
        handleFinish,
        handleFinishFailed,
      }
    },
  }
</script>
